<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@page import="java.io.*" %>
     <%@page import="mavenWebProject.productsMapper" %>
     <%@page import="mavenWebProject.products" %>
     <%@page import="java.util.*" %>
     <%@page import="javax.servlet.*" %>
     <%@page import="org.apache.ibatis.io.Resources" %>
     <%@page import="org.apache.ibatis.session.SqlSession"%>
     <%@page import="org.apache.ibatis.session.SqlSessionFactory" %>
     <%@page import="org.apache.ibatis.session.SqlSessionFactoryBuilder" %>
<!DOCTYPE html>
<html lang="en">
<%
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("product");
%>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=name%></title>
</head>

<style>
div[id="anvbottom"]{
        position:absolute ;
        top:0%;
        left:0%;
        right: 0%;
        width:100%;
        height:150px;
        background-color: rgba(255, 255, 255);
        z-index: -1;
            
    }
        button[id="cancelSearch"]{
            position: absolute;
            font-size: 20px;
            right:60px;
            top:50px;
            padding: 5px;
            border-radius: 10px;
            background-color: rgba(255, 0, 0, 0.6);
            text-decoration: none;
            border: 0px;
        }button[id="cancelSearch"]:hover{
            color:rgb(255, 255, 255);
            padding: 8px;
        }button[id="cancelSearch"]:link{
            color:rgb(255, 255, 255);
        }
        form[id="searchForm"]{
            position: absolute;
            top:50px;
            left:600px;
        }
        input[id="searchButton"]{
            padding:8px;
            border-radius: 8px;
            border:none;
            color:rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.1);
        }
        input[type="text"]{
            padding:8px;
            width:300px;
            height:20px;
            border-radius: 8px;
            opacity: 0.8;
        }
        a[id="locateTo1"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo2"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo3"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo4"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
        a[id="locateTo5"]{
            color:white;
            text-decoration: none;
            margin:15px;
            font-size: 18px;
            font-family: fantasy;
        }
    div[id="anv0"]{
        position:absolute ;
        top:0%;
        left:0%;
        right: 0%;
        width:100%;
        height:140px;
        background: linear-gradient(to bottom,rgba(255, 0, 0, 0.5) 0.1%,rgb(234,242,220));
        z-index:999;
    }
    div[id="anv0"]:hover{
        background-color: rgb(255, 255, 255);
    }
        div[id="anv0-1"]{
            position: absolute;
            top:45px;
            left:35px;
            width:150px;
            height:55px;
        }
        p[id="brandName"]{
            font-size: 40px;
            color: white;
            font-family:fantasy;
            margin: 0px;
        }
        button[id="showSearch"]{
            color:white;
            font-size:18px;
            width:40x;
            border:none;
            margin: 0px;
            background-color: rgb(0,0,0,0);
        }button[id="showSearch"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:60px;
        	border-radius:10px;
        	padding:8px;
        }
        p[id="randomP1"]{
            color:white;
            font-size:20px;
            font-weight: bold;
            margin: 0px;
        }p[id="randomP1"]:hover{
        	background-color:rgb(0,0,0,0.6);
        	width:50px;
        	border-radius:10px;
        	padding:10px;
        }
        a:link{
            text-decoration: none;
        }
        div[id="anv2"]{
            position: absolute;
            top:0px;
            left:0%;
            height:800px;
            width:auto;
        }
        p[id="anv2-p1"]{
            position: absolute;
            top:750px;
            left:10px;
            color:rgb(0, 0, 0);
            font-size: 30px;
            font-family:fantasy;
            margin:20px;
        }


    div[id="imgDiv"]{
        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        height:1000px;
        background-color:rgb(234,242,220) ;
    }
        img[id="showImg"]{
            position: relative;
            left:180px;
            top:200px;
        }
    table[id="table1"]{
        position: absolute;
        left:950px;
        top:210px;
        width:280px;
        height:500px;
        background-color: rgba(240, 248, 255, 0);
        font-family: 楷体;
        font-size: 20px;
    }
        input[type="radio"]{
            list-style: none;
            margin:5px;
            padding: 10px;
        }
        button[id="addToCar"]{
            border: none;
            font-size: 12px;
            background-color: black;
            color:white;
            border-radius: 10px;
            margin:0px;
            width:150px;
            height:30px;
        }
        button[id="purchase"]{
            border: none;
            font-size: 12px;
            background-color: black;
            color:white;
            border-radius: 10px;
            margin:0px;
            width:150px;
            height:30px;
        }
        a[id="minus"]{
            border:none;
            margin: 0px;
            width:16px;
            font-size:16px;
            background-color: rgba(240, 248, 255, 0);
        }
        a[id="add"]{
            border:none;
            margin: 0px;
            width:16px;
            font-size:16px;
            background-color: rgba(240, 248, 255, 0);
        }
        input[id="purchaseNum"]{
            width:18px;
            height:16px;
            font-size: 16px;
            margin: 0px;
            border: none;
            align-content: center;
            background-color: rgba(240, 248, 255, 0);
        }

</style>

<body>


    <div id="anv0">

        <table border="0">
            <tr>
                <td width="50px" height="40px">&nbsp;</td>
                <td width="20px">&nbsp;</td>
                <td width="90px">&nbsp;</td>
                <td width="60px">&nbsp;</td>
                <td rowspan="2" width="1100px" align="center" valign="middle">
                    <p id="brandName">B U Y&nbsp;&nbsp;&nbsp;I T&nbsp;&nbsp;&nbsp;S H O P</p>
                </td>
                <td width="200px">&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td></td>
                <td ></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td height="60px">&nbsp;</td>
                <td></td>
                <td></td>
                <td></td>
                <td align="center" valign="middle">
                    <a id="locateTo1" href="productsDetails.jsp?root=all">ALL</a> 
                    <a id="locateTo2" href="productsDetails.jsp?root=man">MAN-CLOTHING</a>
                    <a id="locateTo3" href="productsDetails.jsp?root=female">FEMALE-CLOTHING</a>
                    <a id="locateTo4" href="productsDetails.jsp?root=bag">BAG</a>
                    <a id="locateTo5" href="productsDetails.jsp?root=jewelry">JEWELRY</a>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
	
	
    <%
  	//1.加载mybatis的核心配置文件，获取sqlsessionfactory
	String resource = "mybatis-config.xml";
	InputStream inputStream = Resources.getResourceAsStream(resource);
	SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
	//2.获取sqlsession对象，用它来执行sql
	SqlSession sqlsession=sqlSessionFactory.openSession();
	//3.获取mapper接口的代理对象
	productsMapper mapper=sqlsession.getMapper(productsMapper.class);
	//4.执行方法
	request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");
	List<products> good=mapper.selectByName(name);
	int price=0;int storage=0;int sold=0;String kind="";String for_group="";String img="";
	for(products s:good){
		price=s.getPrice();storage=s.getStorage();sold=s.getSold();
		kind=s.getKind().trim();for_group=s.getFor_group().trim();img=s.getImg().trim();
		if(kind.contentEquals("clothing") && for_group.contentEquals("w")){
			img="shopCenterImgs/female-clothing/"+img;
		}else if(kind.contentEquals("clothing") && for_group.contentEquals("m")){
			img="shopCenterImgs/man-clothing/"+img;
		}else if(kind.contentEquals("bag")){
			img="shopCenterImgs/bag/"+img;
		}else if(kind.contentEquals("jewelry")){
			img="shopCenterImgs/jewelry/"+img;
		}
	}
	//6.释放资源
	sqlsession.close();
    %>

    <div id="imgDiv"><img id="showImg" src="<%=img%>" width="600px" height="600px"></div>

    <table id="table1" border="0" cellspacing="5px">
    <form id="purchaseForm">
        <tr>
            <td width="200px" height="30px"><font style="font-size:23px;"><%=name%><input type="text" name="name" value="<%=name%>" style="display:none"><input type="text" name="img" value="<%=img%>" style="display:none"></font></td>
        </tr>
        <tr>
            <td height="30px"><font style="font-size:21px;color: rgb(96, 96, 96);">￥ <%=price%><input type="text" name="price" value="<%=price%>" style="display:none"></font></td>
        </tr>
        <tr>
            <td height="30px"></td>
        </tr>
        <tr>
            <td height="30px"><font style="font-size:18px"><% 
            	if(storage==0){
            		out.println("<font style='color:gray'>无库存</font>");
            	}else if(storage<=10){
            		out.println("<font style='color:red'>库存紧张，数量有限</font>");
            	}else if(storage>10){
            		out.println("<font style='color:green'>库存充足</font>");
            	}
            %></font></td>
        </tr>
        <tr>
            <td height="30px"><font style="font-size:18px">累计售出：<%=sold%>（件）</font></td>
        </tr>
        <tr>
            <td height="10px"></td>
        </tr>
        <tr>
            <td height="40px">
                <font style="font-family:fantasy;font-size: 16px;">
                    <p>选择合适的尺码：</p>
	                    <input type="radio" id="radio1" name="size" value="s" checked="checked"><label for="radio1">S</label>
	                    &nbsp;&nbsp;<input type="radio" id="radio2" name="size" value="m"><label for="radio2">M</label>
	                    &nbsp;&nbsp;<input type="radio" id="radio3" name="size" value="x"><label for="radio3">X</label><br>
	                    <input type="radio" id="radio4" name="size" value="xl"><label for="radio4">XL</label>
	                    <input type="radio" id="radio5" name="size" value="xxl"><label for="radio5">XXL</label>
                </font>
            </td>
        </tr>
        <tr>
            <td height="10px"></td>
        </tr>
        <tr>
            <td height="30px">
                <a id="minus" onclick="minus()">-</a>
                <input id="purchaseNum" name="num" type="text" value="1" readonly="readonly">
                <a id="add" onclick="add()">+</a>
            </td>
        </tr>
        </form>
        <tr>
            <td height="40px" valign="bottom"><button id="addToCar" onclick="addToCar()">加入购物袋</button></td>
        </tr>
        <tr>
            <td height="40px" valign="top"><button id="purchase" onclick="purchase()">立刻购买</button></td>
        </tr>
        <tr>
            <td ><font style="font-size: 16px;color:rgb(77, 77, 77)">电话咨询 ： 17816752712</font></td>
        </tr>
    </table>





    <script>
    const searchImgEvent=document.getElementById("anv0");
    searchImgEvent.onmouseenter=function(){
        document.getElementById("searchImg").src="Imgs/search2.png";
        document.getElementById("brandName").style.color="black";
        document.getElementById("showSearch").style.color="black";
        document.getElementById("randomP1").style.color="black";
        document.getElementById("locateTo1").style.color="black";
        document.getElementById("locateTo2").style.color="black";
        document.getElementById("locateTo3").style.color="black";
        document.getElementById("locateTo4").style.color="black";
        document.getElementById("locateTo5").style.color="black";
    }
    searchImgEvent.onmouseleave=function(){
        document.getElementById("searchImg").src="Imgs/search1.png";
        document.getElementById("brandName").style.color="white";
        document.getElementById("showSearch").style.color="white";
        document.getElementById("randomP1").style.color="white";
        document.getElementById("locateTo1").style.color="white";
        document.getElementById("locateTo2").style.color="white";
        document.getElementById("locateTo3").style.color="white";
        document.getElementById("locateTo4").style.color="white";
        document.getElementById("locateTo5").style.color="white";
    }

    function cancelSearch(){
        document.getElementById("anvbottom").style.zIndex=-1;
        document.getElementById("anv0").style.zIndex=999;
    }

    function showSearch(){
        document.getElementById("anvbottom").style.zIndex=999;
        document.getElementById("anv0").style.zIndex=-1;
    }
    
    function backToMainScene(){
    	window.history.go(-1);
    }
	
    const storage="<%=storage%>";
    function minus(){
        const temp1=document.getElementById("purchaseNum");
        const num1= parseInt(temp1.value)-1;
        if(num1>=1){
            temp1.value=num1;
        }else{
        	alert("不能再少啦");
        }
    }
    function add(){
        const temp2=document.getElementById("purchaseNum");
        const num2= parseInt(temp2.value)+1;
        if(num2<=storage){
            temp2.value=num2;
        }else{
        	alert("没啦没啦不能再多啦");
        }
    }
    
    function addToCar(){
        const addToCar=document.getElementById("purchaseForm");
        addToCar.metgod="post";addToCar.action="AddToCarServlet";
        addToCar.submit();
    }
    
    function purchase(){
    	 const addToCar=document.getElementById("purchaseForm");
         addToCar.metgod="post";addToCar.action="PurchaseServlet";
         addToCar.submit();
    }

    </script>

</body>
</html>